<template>
	<view class="shop-cart">
		<template v-if='list.length>0'>
			<!-- 自定义导航栏 -->
			<view class="nav-shopcart">
				<uniNavbar
					title="购物车" 
					:right-text='isNavBar?"完成":"编辑"'
					fixed="true"
					status-bar='true'
					@clickRight='isNavBar = !isNavBar'
				></uniNavbar>
			</view>
			<!-- 商品内容 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in list" :key="index">
					<label class="radio" @tap="selectedItem(index)">
						<radio value="" color="#FF3333" :checked="item.checked" /><text></text>
					</label>
					<image class="shop-img" :src="item.imgUrl" mode=""></image>
					<view class="shop-text">
						<view class="shop-name">{{item.name}}</view>
						<view  class="shop-color f-color">{{item.color}}</view>
						<view class="shop-price">
							<view>￥{{item.pprice}}</view>
							<!-- //判断是编辑状态 -->
							<template v-if= '!isNavBar'>
								<view class="f-color shop-num">*{{item.num}}</view>
							</template>
							<template v-else>
								<uniNumberBox
									:value='item.num'
									min="1"
									@change="changeNumber($event,index)"
								>
								</uniNumberBox>
							</template>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部：提交订单 -->
			<view class="shop-foot">
				<label class="radio">
					<radio value="" color="#FF3333" @tap="checkedAllFn" :checked="checkedAll" /><text>全选</text>
				</label>
				<template v-if= '!isNavBar'>
					<view class="foot-total">
						<view>合计:<text>￥{{totalCount.pprice}}</text></view>				
						<view class="foot-num" @tap="goConfirm">结算({{totalCount.num}})</view>
					</view>
				</template>
				<template v-else>
					<view class="foot-total">
						<view class="foot-num" style="background-color: #0000000;">移入收藏夹</view>				
						<view class="foot-num" @tap="delGoodsFn">删除</view>
					</view>
				</template>
			</view>
		</template>
		<template v-else>
			<!-- 自定义导航栏 -->
			<uniNavbar title="购物车" fixed="true" status-bar='true'></uniNavbar>
			<view class="shop-else-list">
					<text>囧~购物车还是空的~</text>
			</view>
		</template>
		<Tabbar cureentPage = 'shopcart'></Tabbar>
	</view>
</template>

<script>
	import uniNavbar from '@/components/uni/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import uniNumberBox from '@/components/uni/uni-number-box/components/uni-number-box/uni-number-box.vue'
	// 导入,car.js中的数据
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		data() {
			return {
				isNavBar:false,
			}
		},
		components:{
			uniNavbar,
			uniNumberBox,
			Tabbar
		},
		// 使用vuex文件下的数据值
		computed:{
			...mapState({
				list:state =>state.cart.list
			}),
			...mapGetters(['checkedAll','totalCount']),
		},
		methods: {
			...mapActions(['checkedAllFn','delGoodsFn']),
			...mapMutations(['selectedItem']),
			//更改商品数量值
			changeNumber(value,index){
				this.list[index].num = value;
			},
			// 进入确定订单页面
			goConfirm() {
				uni.navigateTo({
					url:'../confirm-order/confirm-order'
				})
			},
			
		}
	}
</script>

<style scoped>
.nav-shopcart {
	margin-top: 50rpx;
}
.shop-list {
	padding-bottom: 100rpx;
}
.shop-item {
	display: flex;
	padding: 20rpx;
	align-items: center;
	background-color: #F7F7F7;
	margin-bottom: 10rpx;
}
.shop-color {
	font-size: 24rpx;
}

.shop-img {
	width: 200rpx;
	height: 200rpx;
}
.shop-price {
	display: flex;
	justify-content: space-between;
}
.shop-text {
	flex: 1;
	padding-left: 30rpx;
}

/* 底部信息样式	 */
.fontSize-26 {
	font-size: 26rpx;
}
.shop-foot{
	border-top: 2rpx solid #CCCCCC;
	width: 100%;
	height: 80rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.foot-total {
	display: flex;
	justify-content: center;
	align-items: center;
}
.radio {
	padding-right: 20rpx;
}
.foot-num {
	margin-left: 20rpx;
	padding-left: 50rpx;
	justify-content: center;
	color: #FFFFFF;
	padding: 10rpx 30rpx;
	background-color: #49BDFB;
}

/* 无数据时的页面样式 */
.shop-else-list {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #F7F7F7;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
